<div class="tab-wrap">
    <#if isUnlocked == false>
		<div class="lock-tips">
			<div class="title">
				Below is a sample report. This feature only available to <em>ADVANCED</em> version or higher.
				<br>
				Please use credit to unlock the report or upgrade your membership.
			</div>
			<div class="right">
				<button class="gd-btn btn-default">Unlock</button>
				<button class="gd-btn btn-info">Upgrade</button>
			</div>
		</div>
        <#if isMobile == false>
		    <img class="demo-img" src="${request.contextPath}/static/img/ins/Product-Tagged-Web.png" alt="sample report">
        <#else>
		    <img class="demo-img" src="${request.contextPath}/static/img/ins/Product-Tagged-Mobile.png"
		         srcset="${request.contextPath}/static/img/ins/Product-Tagged-Mobile@2x.png 2x" alt="sample report">
        </#if>
    <#else>
	    <div class="date-tab-wrap" id="productDateTab">
		    <ul class="ana-tab">
			    <li class="ana-tab-item" value="0">7 Days</li>
			    <li class="ana-tab-item" value="1">15 Days</li>
			    <li class="ana-tab-item is-active" value="2">30 Days</li>
		    </ul>
	    </div>
	    <div class="wrap-item">
		    <div class="wrap-item__title">
			    Product Tagged Media Performance
		    </div>
		    <div class="quality-wrap">
			    <div class="quality-list" id="productBaseInfo">
				    <div class="quality-item">
					    <div class="title">
						    Post
					    </div>
					    <div class="sub-title">
						    -
					    </div>
				    </div>
				    <div class="quality-item">
					    <div class="title">
						    Avg Views
					    </div>
					    <div class="sub-title">
						    -
					    </div>
				    </div>
				    <div class="quality-item">
					    <div class="title">
						    Avg Likes
					    </div>
					    <div class="sub-title">
						    -
					    </div>
				    </div>
				    <div class="quality-item">
					    <div class="title">
						    Avg Reviews
					    </div>
					    <div class="sub-title">
						    -
					    </div>
				    </div>
				    <div class="quality-item">
					    <div class="title">
						    Avg ER
					    </div>
					    <div class="sub-title">
						    -
					    </div>
				    </div>
			    </div>
		    </div>
	    </div>
	    <div class="wrap-item">
		    <div class="wrap-item__title">
			    Tagged Product
			    <div class="gd-popover"
                        <#if isMobile == false>
						    content="Tagged Product: <br>The list of products that the influencer tagged in the selected period.<br>
                     Post:<br> The number of media tagged with this product in the selected period.<br>
                     Engagements:<br> Total number of reviews and likes of the media tagged with this product in the selected period.<br>
                     Avg ER:<br> The average engagement rate of media tagged with this product in the selected period."
                        <#else>
						    content="<dl class='modal-tip'>
							<dt>1. Tagged Product</dt>
							<dd>The list of products that the influencer tagged in the selected period.</dd>
							<dt>2. Post: </dt>
							<dd>The number of media tagged with this product in the selected period.</dd>
							<dt>3. Engagements</dt>
							<dd>Total number of reviews and likes of the media tagged with this product in the selected period.</dd>
							<dt>4. Avg ER</dt>
							<dd>The average engagement rate of media tagged with this product in the selected period.</dd>
						</dl>"
                        </#if>
			    >
				    <i class="iconfont iconfaq"></i>
			    </div>
		    </div>
		    <div class="tagBrand-wrap" id="tagProductWrap">
			    <div class="gd-select" style="display: none">
				    <div class="gd-select-title">
					    <div class="label">All</div>
					    <i class="iconfont icondown1"></i>
				    </div>
				    <div class="gd-select-wrap">
					    <ul id="tagProductSelect">
					    </ul>
				    </div>
			    </div>
			    <ul class="tag-list" id="tagProductCategory" style="display: none">
				    <li class="tag-item is-active">All ( 0 )</li>
			    </ul>
			    <div class="grid-list" id="tagProductList">
				    <div class="grid-list__inner">
					    <div class="tag-product-item">
						    <div class="top">
							    <div class="tag-product-info">
								    <div class="avatar">
									    <img class="avatar-img" src="" alt="product image">
								    </div>
								    <div class="info">
									    <div class="category"></div>
									    <div class="title"></div>
									    <div class="sub-title"></div>
								    </div>
							    </div>
							    <div class="tag-product-data">
								    <div class="data-item">
									    <div class="title">Post</div>
									    <div class="sub-title"></div>
								    </div>
								    <div class="data-item">
									    <div class="title">Engagements</div>
									    <div class="sub-title"></div>
								    </div>
								    <div class="data-item">
									    <div class="title">Avg ER</div>
									    <div class="sub-title"></div>
								    </div>
							    </div>
						    </div>
						    <div class="bottom">
							    View Media List
						    </div>
					    </div>
				    </div>
				    <div class="grid-list__footer">
					    <span>View More</span>
				    </div>
			    </div>
		    </div>
	    </div>
	</#if>
</div>
<script type="module">
    import { Select } from '/static/js/gd-ui/select/index.es.js'
    import { getGridList, openDetail } from '/static/js/common.js'

    let dayType = 2
    let productParam = {
        uid: '${blogger.uid?c}',
        page: 1,
        pageSize: 6
    }

    <#if isUnlocked == true>
    initProduct()
    </#if>

    function initProduct() {
        initProductEvent()
        getProductInfo()
        getProductCategory()
        getProduct()
    }
    function initProductEvent() {
        const footer = document.querySelector('#tagProductList .grid-list__footer span')
	    footer.addEventListener('click', e => {
	        getProduct()
	    })

        // overview 时间选择切换
        const overviewTabs = document.querySelectorAll('#productDateTab .ana-tab .ana-tab-item')
        overviewTabs.forEach(item => {
            item.addEventListener('click', () => {
                if(!item.classList.contains('is-active')) {
                    item.parentElement.querySelector('.is-active').classList.remove('is-active')
                    item.classList.add('is-active')

                    dayType = item.getAttribute('value')
                    productParam.page = 1
                    getProductInfo()
                    getProductCategory()
                    getProduct()
                }
            })
        })
    }
    const mediaListParam = {
        page: 1,
        pageSize: 9,
        mediaType: 0,
        uid: '${blogger.uid?c}'
    }
    function getMediaList(productId) {
        showLoading()
        mediaListParam.page = 1
        mediaListParam.dayType = dayType
        mediaListParam.productId = productId
        const url = getEncodeUrl('/ins/product/rel/media', mediaListParam)
        _axios.get(url).then(res => {
            hideLoading()
            if(res.Code === 200) {
                let str = '<div class="title">Media List</div>' +
	                '<div class="grid-list">' +
                    '<div class="grid-list__inner row-3">'
	            res.Data.list.forEach(item => {
	                str += '<div class="brand-post-item" data-id="' + item.id + '" data-shortcode="'+ item.shortcode +'">' +
		                '<div class="avatar">' +
	                        '<img class="brand-avatar" src="' + getImage(item.displayUrl, IMAGE_TYPE.MEDIA, IMAGE_SIZE.MIDDLE) + '" alt="FC Barcelona">'
	                    switch (item.mediaType){
	                        case 1:
	                            str += '<i class="iconfont iconMultiPhoto-16px"></i>'
	                            break
	                        case 2:
	                            str += '<i class="iconfont iconinsvideo-16px"></i>'
	                            break
	                        case 3:
	                            str += '<i class="iconfont iconigtv"></i>'
	                            break
	                        case 4:
	                            str += '<i class="iconfont iconinstagram-reels"></i>'
	                            break
	                    }
		            str += '<div class="bottom">' +
				            '<i class="iconfont iconhuo"></i>' +
				            '<span>' + numFormat(item.score) + '</span>'
					if (item.isSponsored) {
						str += '<div class="right">Sponsored</div>'
					}
					str += '</div>' +
							'</div>'
					str += '<div class="brand-data">' +
                            '<div class="brand-data-item">' +
	                            '<div class="label">Reviews</div>' +
	                            '<b>' + numFormat(+item.commentCount) + '</b>' +
		                    '</div>' +
                            '<div class="line"></div>' +
                            '<div class="brand-data-item">' +
                                '<div class="label">Likes</div>' +
                                '<b>' + numFormat(+item.likeCount) + '</b>' +
	                        '</div>' +
                            '<div class="line"></div>' +
                            '<div class="brand-data-item">' +
                                '<div class="label">ER</div>' +
                                '<b>' + numFormat(+item.er * 100) + '%</b>' +
		                    '</div>' +
	                        '</div>' +
                            '</div>'
	            })
	            str += '</div>' +
                    '<div class="grid-list__footer">' +
                    '<span>View More</span>' +
                    '</div>' +
                    '</div>'
                showModal({
                    position: {
                        top: 100
                    },
                    class: 'product-media-modal',
                    isShowConfirmBtn: false,
                    isShowCancelBtn: false,
                    content: str
                })

                if (gugeeOS.isIPhone) {
                    const inner = document.querySelector('.product-media-modal .grid-list__inner')
                    inner.style.marginBottom = '160px'
                }
	            const list = document.querySelectorAll('.product-media-modal .brand-post-item')
                list.forEach(item => {
                    item.addEventListener('click', () => {
                        const id = item.getAttribute('data-id')
						const shortcode = item.getAttribute('data-shortcode')
                        openDetail(id,shortcode)
                    })
                })

	            // view More 事件
	            const footer = document.querySelector('.product-media-modal .grid-list__footer')
	            if(res.Data.lastPage) {
                    footer.hide()
	            }
	            footer.addEventListener('click', () => {
                    mediaListParam.page ++
                    getMoreMediaList()
                })
            }
        })
    }

    function getMoreMediaList() {
        const wrap = document.querySelector('.product-media-modal .grid-list')
        const footer = wrap.querySelector('.grid-list__footer')
        getGridList({
            loadingElement: wrap,
            url: '/ins/product/rel/media',
	        params: mediaListParam,
            listWrap: wrap.querySelector('.grid-list__inner'),
            footerElement: footer,
            listDomFunc: item => {
                let str = ''
                str += '<div class="brand-post-item"  data-id="' + item.id + '" data-shortcode="'+ item.shortcode +'">' +
                    '<img class="brand-avatar" src="' + item.displayUrl + '" alt="FC Barcelona">'
                switch (item.mediaType){
                    case 1:
                        str += '<i class="iconfont iconMultiPhoto-16px"></i>'
                        break
                    case 2:
                        str += '<i class="iconfont iconinsvideo-16px"></i>'
                        break
                    case 3:
                        str += '<i class="iconfont iconigtv"></i>'
                        break
                    case 4:
                        str += '<i class="iconfont iconinstagram-reels"></i>'
                        break
                }
                str += '<div class="brand-data">' +
                    '<div class="brand-data-item">' +
                    '<div class="label">Reviews</div>' +
                    '<b>' + numFormat(+item.commentCount) + '</b>' +
                    '</div>' +
                    '<div class="line"></div>' +
                    '<div class="brand-data-item">' +
                    '<div class="label">Likes</div>' +
                    '<b>' + numFormat(+item.likeCount) + '</b>' +
                    '</div>' +
                    '<div class="line"></div>' +
                    '<div class="brand-data-item">' +
                    '<div class="label">ER</div>' +
                    '<b>' + numFormat(+item.er * 100) + '%</b>' +
                    '</div>' +
                    '</div>' +
                    '</div>'
	            return str
            },
            otherEvent: () => {
                mediaListParam.page ++

                const list = document.querySelectorAll('.product-media-modal .brand-post-item')
                list.forEach(item => {
                    item.addEventListener('click', () => {
                        const id = item.getAttribute('data-id')
						const shortcode = item.getAttribute('data-shortcode')
                        openDetail(id,shortcode)
                    })
                })
            }
        })
    }

    function getProductInfo() {
        const productBaseInfo = document.getElementById('productBaseInfo')
        productBaseInfo.showLoading()
	    const url = getEncodeUrl('/ins/blogger/product/media/st', {
            uid: '${blogger.uid?c}',
            dayType: dayType
        })
        _axios.get(url).then(res => {
			if(res.Code === 200) {
			    const titles = productBaseInfo.querySelectorAll('.sub-title')
                titles[0].innerText = res.Data.posts? numFormat(+res.Data.posts) : '-'
                titles[1].innerText = res.Data.avgView? numFormat(+res.Data.avgView) : '-'
                titles[2].innerText = res.Data.avgLikes? numFormat(+res.Data.avgLikes) : '-'
                titles[3].innerText = res.Data.avgReviews? numFormat(+res.Data.avgReviews) : '-'
                titles[4].innerText = res.Data.avgEr? (numFormat(+res.Data.avgEr*100) + '%') : '-'
			}
            productBaseInfo.hideLoading()
        })
    }
    function getProductCategory() {
        const url = getEncodeUrl('/ins/blogger/product/category/count', {
            uid: '${blogger.uid?c}',
            dayType: dayType
        })
        _axios.get(url).then(res => {
            if(res.Code === 200) {
                let str = ''
	            let selectStr = ''
                const tagProductCategory = document.getElementById('tagProductCategory')
	            const tagProductSelect = document.getElementById('tagProductSelect')
                res.Data.forEach((item, i) => {
                    if(!item.category) {
                        return true
                    }
					if(i === 0) {
					    str += '<li class="tag-item is-active">' + item.category + ' ( ' + item.count + ' ) </li>'
                        selectStr += '<li class="gd-option is-active" value="' + item.category + '">' + item.category + '</li>'
					} else {
                        str += '<li class="tag-item">' + item.category + ' ( ' + item.count + ' ) </li>'
                        selectStr += '<li class="gd-option" value="' + item.category + '">' + item.category + ' ( ' + item.count + ' ) </li>'
					}
                })
                tagProductCategory.innerHTML = str
                tagProductSelect.innerHTML = selectStr

	            const select = new Select()
	            select.setElement([tagProductSelect.parentElement.parentElement])
	            select.init()
            }
        })
    }
    function getProduct() {
        const tagProductWrap = document.getElementById('tagProductWrap')
	    const tagProductList = document.getElementById('tagProductList')
        const innerWrap = tagProductList.querySelector('.grid-list__inner')
        tagProductWrap.showLoading()
        productParam.dayType = dayType
        const url = getEncodeUrl('/ins/blogger/rel/product', productParam)
        _axios.get(url).then(res => {
            if(res.Code === 200) {
                const data = res.Data
                const footer = tagProductList.querySelector('.grid-list__footer')
                if(data.totalRow === 0) {
					showNoDataImg(innerWrap)
                    footer.hide()
	            } else {
                    let str = ''
                    if(data.lastPage) {
                        footer.hide()
                    }
                    if(productParam.page > 1) {
                        str += innerWrap.innerHTML
                    }
                    productParam.page ++

		            res.Data.list.forEach(item => {
		                str += '<div class="tag-product-item">' +
			                    '<a href="/instagram/product/' + item.productId + '" >' +
		                            '<div class="top">' +
		                            '<div class="tag-product-info">' +
		                            '<div class="avatar">' +
		                            '<img class="avatar-img" src="' + getImage(item.image, IMAGE_TYPE.PRODUCT, IMAGE_SIZE.MIDDLE) + '" alt="product image">' +
		                            '</div>' +
		                            '<div class="info">'
		                        if(item.overallCategoryName) {
		                            str += '<div class="category">' + item.overallCategoryName + '</div>'
		                        }
		                        str += '<div class="title">' + item.productName + '</div>' +
		                            '<div class="sub-title">' + item.price + '</div>' +
		                            '</div>' +
		                            '</div>' +
		                            '<div class="tag-product-data">' +
		                            '<div class="data-item">' +
		                            '<div class="title">Post</div>' +
		                            '<div class="sub-title">' + numFormat(+item.mediaCount) + '</div>' +
		                            '</div>' +
		                            '<div class="data-item">' +
		                            '<div class="title">Engagements</div>' +
		                            '<div class="sub-title">' + numFormat(+item.tec) + '</div>' +
		                            '</div>' +
		                            '<div class="data-item">' +
		                            '<div class="title">Avg ER</div>' +
		                            '<div class="sub-title">' + numFormat(+item.avgEr * 100) +'%</div>' +
		                            '</div>' +
		                            '</div>' +
		                            '</div>' +
			                    '</a>' +
                                '<div class="bottom">' +
				                    '<span data-product-id="' + item.productId + '">View Media List</span>' +
                                '</div>' +
                                '</div>'
		            })

                    innerWrap.innerHTML = str

	                const footers = tagProductList.querySelectorAll('.bottom span')
	                footers.forEach(item => {
                        item.classList.add('is-click-event')
                        item.addEventListener('click', e => {
                            const productId = e.target.getAttribute('data-product-id')
                            getMediaList(productId)
                        })
                    })
                }
            }
            tagProductWrap.hideLoading()
        })
    }
</script>